<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl"/>
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>


  </div>
</template>

<script>
export default {
    name : 'HomeIcons',
    props:{
      list : Array
    },
    data () {
      return{
        // iconList : [{
        //     id:'0001',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        //     desc:'热门景点啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊娃娃'
        //   },{
        //     id:'0002',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png',
        //     desc:'当地好玩'
        //   },{
        //     id:'0003',
        //     url:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
        //     desc:'必游榜单'
        //   },{
        //     id:'0004',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png',
        //     desc:'动植物园'
        //   },{
        //     id:'0005',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',
        //     desc:'全部玩乐'
        //   },{
        //     id:'0006',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
        //     desc:'五当召'
        //   },{
        //     id:'0007',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/87/20656da0ac042002.png',
        //     desc:'林胡古塞'
        //   },{
        //     id:'0008',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png',
        //     desc:'海洋馆'
        //   },{
        //     id:'0009',
        //     url:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png',
        //     desc:'自然风光'
        //   },{
        //     id:'0010',
        //     url:'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
        //     desc:'游乐场'
        //   }]

        swiperOption :{
           autoplay : false
        }
      }
    },
    computed:{
      pages () {
        const pages = []
        this.list.forEach((item,index) => {
          const page = Math.floor(index / 8)  // 指的是 当前下标中的数据应该展示在轮播图的第几页
          if (!pages[page]){
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages;
        //接着下载chrome的Vue Dev Tools插件
      }
    }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  @import '~styles/mixins.styl'
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
    // background: green
  .icons
    overflow hidden
    height 0
    padding-bottom 50%
    margin-top .1rem // 整体往下走一点  看起来更对称
    .icon
      display flex // !
      overflow: hidden
      float: left
      width: 25%
      padding-bottom: 25%
      // background: red
      position: relative
      height: 0.1
      .icon-img
        display flex // !
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .44rem
        // background: blue
        box-sizing: border-box
        padding: .1rem
        .icon-img-content
          height 100%
          margin: 0 auto
          height 100%
      .icon-desc
        position absolute
        left 0
        right 0
        bottom 0
        line-height .44rem
        height .44rem
        color $darkTextColor
        text-align center
        // 下面实现当数据很多的时候 后面跟上...的 样式
        //  当然其他地方也可能用到下面这三行 可以借助stylus进行封装 创建mixins.styl
        // overflow hidden
        // white-space nowrap
        // text-overflow ellipsis
        ellipsis()
</style>
